<template>
	<div class="ctrls">
		<div class="ctrl left" v-show="index>0" @click="$emit('handleCtrl', -1)"><icon type="arrowLeft"/></div>
		<div class="ctrl right" v-show="index<pages-1" @click="$emit('handleCtrl', 1)"><icon type="arrowRight"/></div>
	</div>
</template>

<script>
export default{
	props:{
		index:{
			type: Number,
			default: 0
		},
		pages:{
			type: Number,
			default: 1
		}
	}
}
</script>

<style scoped lang="less">
.ctrls{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	.ctrl{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 70px;
		color: silver;
		font-size: 28px;
		background-color: rgba(255, 255, 255, 0);
		cursor: pointer;
		&:hover{
			background-color: silver;
			transition: background-color .5s;
			color: #fff;
		}
		&.left{
			left: -40px;
		}
		&.right{
			right: -40px;
		}
	}
}
</style>
